<template>
  <div class="login">
    <div
      class="box"
      v-if="login"
    >
      <div class="login-box">
        <div class="t">登录</div>
        <form action="">
          <input
            type="text"
            placeholder="用户名"
            v-model="userName"
          >
          <input
            type="password"
            placeholder="密码"
            v-model="password"
          >
        </form>
        <div
          class="btn"
          @click="loginBtn"
        >登录</div>
        <div
          class="btn2"
          @click="fanhui"
        >取消</div>
      </div>
      <div class="login-box2">
        <div
          class="btn"
          @click="LRbtn"
        >注册</div>
      </div>
    </div>
    <div
      class="box"
      v-if="!login"
    >

      <div class="login-box">
        <div class="t">注册</div>
        <form action="">
          <input
            type="text"
            placeholder="用户名"
            v-model="rUsername"
          >
          <input
            type="password"
            placeholder="密码"
            v-model="rPassword"
          >
          <input
            type="password"
            placeholder="确认密码"
            v-model="rConfirm"
          >
        </form>
        <div
          class="btn"
          @click="registerBtn"
        >注册</div>
        <div
          class="btn2"
          @click="fanhui"
        >取消</div>
      </div>
      <div class="login-box2">
        <div
          class="btn"
          @click="LRbtn"
        >登录</div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 提现记录
import { onMounted, ref } from 'vue'
const login = ref(true)
const userName = ref('')
const password = ref('')
const userArr = ref([])
const rUsername = ref('')
const rPassword = ref('')
const rConfirm = ref('')
onMounted(()=>{
    if(JSON.parse(localStorage.getItem('userArr'))!=null){
        userArr.value = JSON.parse(localStorage.getItem('userArr'))
    }
})
function fanhui() {
  router.push({ path: '/' })
}
function LRbtn() {
  login.value = !login.value
}
function registerBtn(){
    let repeat = false
    for(let i = 0;i<userArr.value.length;i++){
        if(rUsername.value==userArr.value[i].username){
            repeat = true
            break
        }
    }
    if(repeat){
        ElMessage({
            message: '该用户名已注册',
            type: 'warning'
        })
    }
    else if(rUsername.value =='' || rPassword.value==''){
        ElMessage({
            message: '用户名或密码不能为空',
            type: 'error'
        })
    }
    else if(rPassword.value!=rConfirm.value){
        ElMessage({
            message: '两次输入的密码不一样',
            type: 'warning'
        })
    }else{
        let data = {'username': rUsername.value,'password': rPassword.value}
        userArr.value[userArr.value.length] = data
        localStorage.setItem('userArr',JSON.stringify(userArr.value))
        ElMessage({
            message: '注册成功，前往登录',
            type: 'success'
        })
        setTimeout(() => {
            LRbtn()
        }, 1000)
    }
}
function loginBtn() {
    let correct = false
    for(let i = 0;i<userArr.value.length;i++){
        if(userName.value==userArr.value[i].username && password.value==userArr.value[i].password){
            correct = true
            break
        }
    }
    if(correct){
        ElMessage({
            message: '登录成功',
            type: 'success'
        })
        sessionStorage.setItem('loginUser', userName.value)
        window.location.replace('http://' + window.location.host + '/#' )
        window.location.reload()
        // router.push({ path: '/' })
    }
    else{
        ElMessage({
            message: '用户名或密码错误',
            type: 'warning'
        })
    }
}
</script>
<style scoped>
.login {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background-image: url(https://www.pohome.cn/image/login-background.jpg);
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login .box {
  box-shadow: 5px 5px 20px 0px #0000004e;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 25px;
  overflow: hidden;
}

.login .login-box {
  width: 400px;
  height: 100%;
  padding: 40px;
  background-color: #ffffff6b;
  display: flex;
  flex-direction: column;
}
.login .login-box .t {
  width: 100%;
  letter-spacing: 10px;
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 600;
}

.login .login-box form {
  width: 100%;
}
.login form input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  background-color: #84a36e63;
  color: #fff;
}
.login form input::placeholder {
  color: #fff;
}
.login input:focus {
  outline: none;
}

.login .login-box .btn,
.login .login-box2 .btn {
  margin: auto;
  margin-top: 20px;
  width: 100px;
  padding: 8px 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: 5px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(-45deg, #ffd500, #69b45a, #5ecc52, #ffff00);
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite;
}
.login .login-box .btn:hover,
.login .login-box2 .btn:hover {
  cursor: pointer;
}
.login .login-box2 {
  width: 220px;
  text-align: center;
}

.login .btn2 {
  font-weight: 600;
}

.login .btn2:hover {
  color: var(--myc);
  cursor: pointer;
}
@media (max-width: 700px) {
  .login .box {
    position: relative;
    width: 80%;
  }
  .login .login-box {
    width: 100%;
  }
  .login .login-box2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 50px;
    border-radius: 25px 0 0 0;
    background: linear-gradient(-45deg, #ffd500, #69b45a, #5ecc52, #ffff00);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    transition: 1s;
  }
  .login .login-box2 .btn {
    background: none;
    margin: 0;
    width: 100%;
    line-height: 35px;
    padding-left: 5px;
  }
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>